<template>
    <div class="payIndex">
        <el-header>计费管理 / 缴费类性管理</el-header>
        <el-main>
            <div class="mainLeft">
                <el-input
                    v-model="userInfo.paymoney"
                    placeholder="项目价格"
                    style="width: 200px; margin-right: 20px"
                    clearable
                ></el-input>
                <el-select v-model="userInfo.paystatus" placeholder="通知状态">
                    <el-option label="已通知" :value="1"></el-option>
                    <el-option label="未通知" :value="2"></el-option>
                </el-select>
            </div>
            <div class="mainRight">
                <span
                    data-v-51f26864=""
                    class="list-title"
                    style="
                        float: left;
                        margin-left: 30px;
                        font-weight: bold;
                        font-size: 1.5em;
                    "
                    >{{ biaoti }}</span
                >
                <span>
                    <el-button
                        type="primary"
                        size="middle"
                        @click="handleInquire"
                        >查询</el-button
                    >
                    <el-button type="success" size="middle" @click="handleAdd"
                        >新增</el-button
                    >
                    <el-button
                        type="warning"
                        size="middle"
                        @click="handleFlushed"
                        >刷新
                    </el-button>
                    <el-button type="danger" size="middle" @click="handleExport"
                        >导出</el-button
                    >
                </span>
            </div>
        </el-main>
        <div class="body">
            <el-tree
                :data="data"
                ref="tree"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expand-all="true"
                node-key="id"
            ></el-tree>
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                align="ceter"
            >
                <el-table-column
                    prop="payname"
                    label="缴费项目名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="paylevel"
                    label="缴费项目优先级"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="paynum"
                    label="缴费用量/时长"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="paymoney"
                    label="项目价格"
                    align="center"
                >
                </el-table-column>
                <el-table-column prop="paytime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span style="text-align: center">{{
                            scope.row.paytime.substring(0, 10)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="通知人" align="center">
                    <template slot-scope="scope">
                        <span style="text-align: center">{{
                            scope.row.username == null
                                ? "暂无"
                                : scope.row.username
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="paystatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            scope.row.username == 1 ? "已通知" : "未通知"
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="220px"
                    style="display: flex"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button @click="handleNotice(scope.row)"
                            >通知</el-button
                        >
                        <el-button
                            style="color: rgb(98, 168, 234)"
                            @click="handleView(scope.row)"
                            >查看</el-button
                        >
                        <el-button
                            style="border-color: #fbc4c4"
                            @click="handleDel(scope.row)"
                            >作废</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination
            :total="total"
            @SizeChange="changeCount"
            @CurrentChange="changePage"
        >
        </Pagination>
        <el-dialog title="计费通知" :visible.sync="dialogVisible" width="60%">
            <div style="display: flex">
                <el-input
                    placeholder="请用户输入账号"
                    style="width: 300px; margin-right: 10px"
                    v-model="modelInfo.username"
                ></el-input>
                <el-button type="primary" @click="getListModel"
                    ><i class="el-icon-search"></i
                ></el-button>
                <el-button type="warning" @click="modelInfo.username = ''"
                    >重置</el-button
                >
            </div>
            <el-table
                :data="modelData"
                border
                style="width: 100%"
                align="ceter"
                ref="singleTable"
                @current-change="handleCurrentChange"
                highlight-current-row
            >
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="用户账号"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="homeaddress"
                    label="序家庭住址号"
                    align="center"
                >
                </el-table-column>
                <el-table-column prop="type" label="类型" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            scope.row.type === 4 ? "普通用户" : "管理员"
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="coststatus"
                    label="缴费状态"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span>{{
                            scope.row.coststatus === 1 ? "已缴费" : "未缴费"
                        }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                :total="total1"
                @SizeChange="changeCount"
                @CurrentChange="changePage"
            >
            </Pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from "@/components/Pagination/Pagination.vue";
export default {
    components: {
        Pagination,
    },
    data() {
        return {
            biaoti: "",
            //模态框选中行
            currentRow: {
                u_id: 0,
                token: "",
                c_id: 0,
                coststatus: 0,
                paystatus: 0,
                username: 0,
            },
            title: "",
            dialogVisible: false,
            total: 0,
            total1: 0,
            delData: {},
            tableData: [],
            modelData: [],
            NoticeData: {
                username: "",
                c_id: 978,
                coststatus: 2,
                paystatus: 1,
                token: "",
            },
            userInfo: {
                c_id: 1,
                currPage: 0,
                pageNum: 9,
                paymoney: "",
                paystatus: "",
                username: "",
            },
            modelInfo: {
                username: "",
                currPage: 0,
                pageNum: 9,
            },
            data: [
                {
                    id: 1,
                    label: "缴费项目",
                    children: [
                        {
                            id: 2,
                            label: "电费项目",
                            children: [
                                {
                                    id: 7,
                                    label: "电费目录表",
                                },
                            ],
                        },
                        {
                            id: 3,
                            label: "水费项目",
                            children: [
                                {
                                    id: 8,
                                    label: "水费固定月目录表",
                                },
                                {
                                    id: 9,
                                    label: "水费按量计价目录表",
                                },
                            ],
                        },
                        {
                            id: 4,
                            label: "天然气项目",
                            children: [
                                {
                                    id: 10,
                                    label: "天然气目录表",
                                },
                            ],
                        },
                        {
                            id: 5,
                            label: "物业费项目",
                            children: [
                                {
                                    id: 11,
                                    label: "物业费目录表",
                                },
                            ],
                        },
                        {
                            id: 6,
                            label: "宽度费项目",
                            children: [
                                {
                                    id: 12,
                                    label: "宽带费目录表",
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
            downloadLoading: false,
            treeData: {
                c_id: 9,
                paymoney: null,
                paystatus: null,
                currPage: 0,
                pageNum: 9,
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        updateKeyChildren(key, data) {
            console.log(key, data, "1111111111");
        },
        async getList() {
            await this.$Axios({
                url: "/cost/getCostData",
                method: "get",
                data: this.userInfo,
                success: (res) => {
                    this.tableData = res.data;
                    console.log(this.tableData);
                    this.total = res.total;
                },
            });
        },
        async DelList() {
            await this.$Axios({
                url: "/cost/delCostData",
                method: "get",
                data: this.delData,
                success: (res) => {
                    this.getList();
                },
            });
        },
        async getListModel() {
            await this.$Axios({
                url: "/users/getUserList",
                method: "get",
                data: this.modelInfo,
                success: (res) => {
                    this.modelData = res.data;
                    this.total1 = res.total;
                },
            });
        },
        //确认通知
        async getListNotice() {
            await this.$Axios({
                url: "/cost/updateCostData",
                method: "post",
                data: this.currentRow,
                success: (res) => {
                    console.log(res, "通知成功");
                    this.$message.success("通知成功");
                },
            });
        },
        //分页
        changeCount(val) {
            if (this.title == "计费通知") {
                this.modelInfo.pageNum = val;
                this.getListModel();
                return;
            }
            this.userInfo.pageNum = val;
            this.getList();
        },
        changePage(val) {
            if (this.title == "计费通知") {
                this.modelInfo.currPage = val;
                this.getListModel();
                return;
            }
            this.userInfo.currPage = val;
            this.getList();
        },
        handleNodeClick(data) {
            this.biaoti = data.label;
            this.userInfo.c_id = data.id;
            this.getList();
        },
        // 查询按钮
        handleInquire() {
            this.getList();
        },
        //新增按钮
        handleAdd() {
            this.$router.push({
                path: "/pay/payAdd",
            });
        },
        //刷新按钮
        handleFlushed() {
            this.userInfo = {
                c_id: 7,
                currPage: 0,
                pageNum: 9,
                paymoney: "",
                paystatus: "",
            };
            this.getList();
        },
        //导出按钮
        handleExport() {
            this.downloadLoading = true;
            import("@/utils/Export2Excel").then((excel) => {
                const tHeader = [
                    "缴费项目名称",
                    "缴费项目优先级",
                    "项目用量/时长",
                    "项目价格",
                    "创建时间",
                    "通知人",
                ];
                const filterVal = [
                    "payname",
                    "paylevel",
                    "paynum",
                    "paymoney",
                    "paytime",
                    "username",
                ];
                excel.export_json_to_excel2(
                    tHeader,
                    this.tableData,
                    filterVal,
                    "缴费列表存储信息"
                );
                this.downloadLoading = false;
            });
        },
        handleClose(done) {
            console.log(this.currentRow);
            this.$confirm("确认通知？")
                .then((_) => {
                    (this.title = ""),
                        (this.modelInfo = {
                            username: "",
                            currPage: 0,
                            pageNum: 9,
                        });
                    this.getListNotice();
                    this.currentRow = {
                        u_id: 0,
                        token: "",
                        c_id: 0,
                        coststatus: 0,
                        paystatus: 0,
                        username: 0,
                    };
                    this.dialogVisible = false;
                })
                .catch((_) => {
                    this.$message.error("已取消通知");
                });
        },
        //通知
        handleNotice(val) {
            this.currentRow = {
                u_id: 0,
                token: "",
                c_id: 0,
                coststatus: 0,
                paystatus: 0,
                username: 0,
            };
            this.title = "计费通知";
            this.getListModel();
            this.dialogVisible = true;
        },
        handleView(val) {
            console.log(val, "val");
            this.$router.push({
                path: "/pay/payView",
                query: {
                    value: JSON.stringify(val),
                },
            });
        },
        //模态框取消按钮
        handleCancel() {
            this.dialogVisible = false;
            this.title = "";
            this.modelInfo = {
                username: "",
                currPage: 0,
                pageNum: 9,
            };
        },
        //模态框选中行
        handleCurrentChange(val) {
            this.currentRow.c_id = val.c_id;
            this.currentRow.u_id = val.id;
            this.currentRow.coststatus = val.coststatus;
            this.currentRow.paystatus = val.parkstatus;
            this.currentRow.username = val.username;
            this.currentRow.token = sessionStorage.getItem("token");
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleDel(val) {
            this.delData.id = val.id;
            this.delData.token = sessionStorage.getItem("token");
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.DelList();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.payIndex {
    .el-main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0;

        .mainRight {
            width: 66.7%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    .body {
        display: flex;

        .el-tree {
            padding-left: 5px;
            padding-right: 5px;
            width: 35%;
        }
    }

    .pagination-container {
        text-align: right;
    }
}

.el-header {
    font-size: 16px;
    font-weight: 600;
    padding: 1em;
}

::v-deep .cell {
    display: flex;
}
</style>